<template>
  <view class="cu-form-group">
    <view class="title">
      <text v-if="required" class="text-red margin-right-xs">*</text>
      {{ title }}</view
    >
    <picker @change="PickerChange" :range="range" range-key="label">
      <view class="picker">
        {{ desc || placeholder }}
      </view>
    </picker>
  </view>
</template>
<script>
const { request } = require("@/api/api");
export default {
  data() {
    return {
      initOptions: [],
      range: [],
    };
  },
  created() {
    this.getOptions();
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    required: {
      type: Boolean,
      required: true,
    },
    dicUrl: {
      type: String,
      required: true,
    },
    prop: {
      type: String,
      required: true,
    },
    desc: String,
    placeholder: String,
    props: {
      type: Object,
      required: true,
    },
  },
  methods: {
    getOptions() {
      request({
        url: this.dicUrl,
        method: "get",
      }).then(({ data }) => {
        let range = data.map((item) => ({
          label: item[this.props.label],
          value: item[this.props.value],
        }));
        this.range = range;
      });
    },
    PickerChange(e) {
      let index = e.detail.value;
      this.$emit("change", this.range[index]);
    }
  }
}
</script>

<style lang="scss">
/deep/ .uni-date__x-input {
  padding: 0;
}
.cu-modal.bottom-modal .cu-dialog {
  border-radius: 30rpx 30rpx 0 0;
}
button .cu-tag {
  position: absolute;
  top: 8upx;
  right: 8upx;
}

.scroll > view {
  position: relative;
}
.scroll > view > .clear-icon {
  position: absolute;
  top: 38rpx;
  right: 10rpx;
  z-index: 2;
}
.scroll > view::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
  border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}
.cu-modal {
  z-index: 888;
}
.cu-form-group1 {
  background-color: #ffffff;
  padding: 0.5px 15px;
  display: flex;
  align-items: center;
  min-height: 52px;
  justify-content: space-between;
  text-align: right;
}
.cu-form-group1 .title {
  text-align: justify;
  padding-right: 15px;
  font-size: 15px;
  position: relative;
  height: 31px;
  line-height: 31px;
}
.cu-form-group input {
  font-size: 28upx;
}
</style>
